<template>
  <uni-popup ref="popup" :type="type" :mask-click="maskClick" :animation="animation" @change="onPopupChange" @maskClick="onMaskClick">
    <view class="msg-popup">
      <view class="popup-content">
        <slot name="content">消息</slot>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'msg-popup',
  props: {
    type: {
      type: String,
      default: 'center'
    },
    maskClick: {
      type: Boolean,
      default: true
    },
    animation: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  methods: {
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    onPopupChange(e) {
      if (!e.show) {
        this.$emit('onPopupChange'); // 弹窗关闭时触发
      }
    },
    onMaskClick() {
      this.$emit('maskClick');
    }
  }
};
</script>

<style lang="scss" scoped>
.msg-popup {
  width: 573rpx;
  height: 528rpx;
  background: url('/static/images/common/msg-popup.png') no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .popup-content {
  }
}
</style>
